<template>
  <page-header-wrapper>
    <page-tab-list>
      <div class="table-page-search-box">
        <a-form layout="inline">
          <a-row :gutter="24">
            <a-col :md="8" :sm="24">
              <a-form-item label="分类名称">
                <a-input allow-clear placeholder="请输入分类名称" v-model="queryParam.name"></a-input>
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form-item label="">
                <a-button type="primary" @click="$refs.table.refresh(1)">查询</a-button>
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
      </div>
    </page-tab-list>
    <a-card :bordered="false">
      <div class="table-operator" style="display: flex; justify-content: space-between">
        <a-radio-group v-model="queryParam.status" @change="$refs.table.refresh(1)">
          <a-radio-button value="-1"> 全部 </a-radio-button>
          <a-radio-button value="1"> 已启用 </a-radio-button>
          <a-radio-button value="2"> 已禁用 </a-radio-button>
        </a-radio-group>
        <div>
          <a-button type="primary" @click="onAdd" icon="plus">新建</a-button>
        </div>
      </div>
      <s-table rowKey="id" size="default" :columns="columns" :data="loadData" ref="table">
        <span slot="created_at" slot-scope="text">{{ text | timeFormat }}</span>
        <span slot="icon" slot-scope="text">
          <img :src="text" style="height: 50px; width: auto; border-radius: 3px" alt="" />
        </span>
        <span slot="status" slot-scope="status">
          <!-- <a-switch :default-checked="status == '1'" @change="onStatusChange(item)" /> -->
          <div class="status">
            <span :class="status == 1 ? 'open' : 'close'"></span>
            <span>{{ status == 1 ? '已启用' : '已禁用' }}</span>
          </div>
        </span>
        <span slot="action" slot-scope="text, record">
          <a-button type="link" size="small" @click="handleEdit(record)">编辑</a-button>
          <a-divider type="vertical" style="margin:0 1px;"/>
          <a-dropdown>
            <a-button type="link" size="small"> 更多 <a-icon type="down" /></a-button>
            <a-menu slot="overlay">
              <a-menu-item>
                <a-popconfirm :disabled="record.id == 1" title="确认删除分类吗？" @confirm="handleDelete(record)">
                  <a-button :disabled="record.id == 1" type="link" size="small">删除</a-button>
                </a-popconfirm>
              </a-menu-item>
              <a-menu-item>
                <a-button type="link" @click="onStatusChange(record)" size="small" :disabled="record.is_enable == 1">启用</a-button>
              </a-menu-item>
              <a-menu-item >
                <a-button type="link" @click="onStatusChange(record)" size="small" :disabled="record.is_enable == 0">禁用</a-button>
              </a-menu-item>
            </a-menu>
          </a-dropdown>
        </span>
      </s-table>
    </a-card>
    <a-modal
      :destroyOnClose="true"
      width="700px"
      v-model="visibleEdit"
      :title="form.id == 0 ? '添加类目' : '编辑类目'"
      :confirmLoading="confirmLoading"
      @ok="onEditOk"
    >
      <a-form-model ref="categoryForm" :model="form" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-form-model-item label="名称" placeholder="请输入类目名称" prop="name" has-feedback>
          <a-input v-model="form.name" />
        </a-form-model-item>
        <!-- <a-form-model-item label="图标" prop="icon">
          <cyyUploadImg
            @uploadSuccess="
              (val) => {
                form.icon = val.data
              }
            "
            @deleteImg="form.icon = ''"
            :imgSrc="form.icon"
            imgSizeText="400*400"
          >
          </cyyUploadImg>
        </a-form-model-item> -->
        <a-form-model-item label="状态">
          <a-select v-model="form.is_enable" style="width: 100%">
            <a-select-option value="1"> 启用 </a-select-option>
            <a-select-option value="0"> 禁用 </a-select-option>
          </a-select>
          <!-- <a-switch :default-checked="form.is_enable === '1'" @change="onChangeStatus" /> -->
        </a-form-model-item>
        <!-- <a-form-model-item label="排序" help="数字越大越靠前">
          <a-input-number v-model="form.sort" :min="0" :max="9999999" />
        </a-form-model-item> -->
        <a-form-model-item label="筛选条件" help="用户小程序端用户筛选店铺, 一般跟类目相关">
          <div class="attr_wrap">
            <div class="attr_add_group">
              <a-input style="width: 200px; margin-right: 5px" v-model="attrName" placeholder="输入选项组" />
              <a-button type="primary" @click="onAddAttrGroup"> 添加 </a-button>
            </div>
            <div class="attr_list">
              <div class="attr_list_item" v-for="(item, index) of form.option" :key="index">
                <div class="attr_list_item_name">
                  <span>{{ item.name }}</span>
                </div>
                <div class="attr_list_item_list">
                  <a-select
                    placeholder="请输入选项值"
                    mode="tags"
                    style="width: 360px"
                    v-model="item.list"
                    :showArrow="false"
                  ></a-select>
                </div>
                <div class="attr_list_item_remove">
                  <a-button type="danger" @click="onRemoveAttr(index)" shape="circle" size="small" icon="close" />
                </div>
              </div>
            </div>
          </div>
        </a-form-model-item>
      </a-form-model>
    </a-modal>
  </page-header-wrapper>
</template>

<script>
import { STable } from '@/components'
import { getList, changeStatus, deleteCat, editCategory } from '@/api/saas/category'
import { cyyUploadImg } from '@/components/CyyUi/index'
const columns = [
  {
    title: 'ID',
    dataIndex: 'id',
  },
  {
    title: '分类名称',
    dataIndex: 'name',
  },
  {
    title: '状态',
    dataIndex: 'is_enable',
    scopedSlots: {
      customRender: 'status',
    },
  },
  {
    title: '创建时间',
    dataIndex: 'created_at',
    scopedSlots: {
      customRender: 'created_at',
    },
  },
  {
    title: '操作',
    width: '250px',
    dataIndex: 'action',
    scopedSlots: {
      customRender: 'action',
    },
  },
]

const defaultModel = {
  id: 0,
  name: '',
  is_enable: '1',
  sort: 50,
  icon: '',
  option: [],
}

export default {
  name: 'SaasCategory',
  components: {
    STable,
    cyyUploadImg,
  },
  data() {
    return {
      columns,
      loadData: (parameter) => {
        let { queryParam: data } = this
        return getList({ ...parameter, ...data })
          .then((res) => {
            return res.data
          })
          .catch((err) => {
            this.$message.error(err.message)
            this.$refs.table.localLoading = false
          })
      },
      visibleEdit: false,
      confirmLoading: false,
      form: Object.assign({}, defaultModel),
      rules: {
        name: [{ required: true, message: '请输入类目名称', trigger: 'blur' }],
        icon: [{ required: true, message: '请选择类目图标', trigger: 'blur' }],
      },
      labelCol: {
        xs: {
          span: 24,
        },
        sm: {
          span: 3,
        },
      },
      wrapperCol: {
        xs: {
          span: 24,
        },
        sm: {
          span: 21,
        },
      },
      attrName: '',
      queryParam: {
        status: '-1',
        name: '',
      },
    }
  },
  methods: {
    handleDelete: function (item) {
      this.$message.loading({ content: '处理中...', key: 'deleteLoading' })
      deleteCat({ id: item.id }).then((res) => {
        if (res.code == 0) {
          this.$refs.table.refresh()
          this.$message.success({ content: res.msg, key: 'deleteLoading' })
        } else {
          this.$message.warning({ content: res.msg, key: 'deleteLoading' })
        }
      })
    },
    handleEdit: function (item) {
      this.form = JSON.parse(JSON.stringify(item))
      this.visibleEdit = true
    },
    onEditOk: function () {
      this.$refs['categoryForm'].validate((valid) => {
        if (valid) {
          if (this.form.option.length > 0) {
            for (let i = 0; i < this.form.option.length; i++) {
              if (this.form.option[i].list.length == 0) {
                this.$message.warning('请输入选项组“' + this.form.option[i].name + '”下的选项值')
                return
              }
            }
          }
          this.confirmLoading = true
          editCategory(this.form)
            .then((res) => {
              if (res.code == 0) {
                this.visibleEdit = false
                this.$refs.table.refresh(true)
                this.$message.success(res.msg)
              } else {
                this.$message.error(res.msg)
              }
            })
            .catch((error) => {
              console.log(error)
            })
            .then(() => {
              this.confirmLoading = false
            })
        }
      })
    },
    onStatusChange: function (item) {
      this.$message.loading({ content: '处理中...', key: 'changeLoading' })
      changeStatus({ id: item.id }).then((res) => {
        if (res.code == 0) {
          this.$refs.table.refresh()
          this.$message.success({ content: res.msg, key: 'changeLoading' })
        } else {
          this.$message.warning({ content: res.msg, key: 'changeLoading' })
        }
      })
    },
    onAdd: function () {
      this.form = Object.assign({}, defaultModel)
      this.visibleEdit = true
    },
    onChangeStatus: function (e) {
      this.form.is_enable = e ? '1' : '0'
    },
    onAddAttrGroup: function () {
      if (this.attrName == '') {
        this.$message.warning('请输入选项组名称')
        return
      }
      for (let i = 0; i < this.form.option.length; i++) {
        if (this.form.option[i].name == this.attrName) {
          this.$message.warning('该选项组已经存在')
          return
        }
      }
      if (this.form.option === '') {
        this.form.option = []
      }
      this.form.option.push({ name: this.attrName, list: [] })
      this.attrName = ''
    },
    onRemoveAttr: function (index) {
      this.form.option.splice(index, 1)
    },
  },
}
</script>

<style scoped lang="less">
.attr_add_group {
  display: flex;
}
.attr_list {
  margin-top: 5px;
}
.attr_list_item {
  padding: 10px 0;
  border-bottom: 1px solid #e8e8e8;
  display: flex;
  justify-content: center;
}
.attr_list_item:last-child {
  border-bottom: none;
}
.attr_list_item_name {
  width: 150px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.attr_list_item_name span {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-align: center;
}
.attr_list_item_remove {
  width: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.searchBox {
  padding: 10px 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  /deep/ .ant-input-affix-wrapper {
    width: 220px;
    margin-right: 20px;
  }
  .select {
    margin-top: 11px;
    display: flex;
    align-items: center;
    margin-right: 15px;
  }
}
.status {
  display: flex;
  align-items: center;
  span:nth-child(1) {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    margin-right: 4px;
  }
  .close {
    background-color: #ccc;
  }
  .open {
    background-color: #65c817;
  }
}
</style>
